.odometer.flip-auto-theme {
    display: inline-block;
    vertical-align: middle;
    /* position: relative; */
}
  
.odometer.flip-auto-theme .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.odometer.flip-auto-theme .odometer-digit .odometer-digit-spacer {
    display: inline-block;
    vertical-align: middle;
    visibility: hidden;
}
.odometer.flip-auto-theme .odometer-digit .odometer-digit-spacer {
    
}
.odometer.flip-auto-theme .odometer-digit .odometer-digit-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.odometer.flip-auto-theme .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    border-radius: 0.1em;

    padding: 0 0.15em;
}
.odometer.flip-auto-theme .odometer-digit + .odometer-digit {
    margin-left: 0.1em;
}

/* ========================================= */
.odometer.flip-auto-theme .odometer-digit .odometer-ribbon-inner {
    border-radius: 0.1em;
    display: inline-block;
    position: relative;
    border: solid 1px transparent;
    text-align: center;
}
.odometer.flip-auto-theme .odometer-digit .odometer-value:before,
.odometer.flip-auto-theme .odometer-digit .odometer-value:after {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.odometer.flip-auto-theme .odometer-digit .odometer-value:before {
    border-radius: 0.1em 0.1em 0 0;
    top: 0;
    bottom: 50%;
    // border-bottom: solid 1px white;
    background: -webkit-linear-gradient(top, #02eef7 0%, #0a2597 55%, #0a2597 100%);
    background: -moz-linear-gradient(   top, #02eef7 0%, #0a2597 55%, #0a2597 100%);
    background: -o-linear-gradient(     top, #02eef7 0%, #0a2597 55%, #0a2597 100%);
    background: -ms-linear-gradient(    top, #02eef7 0%, #0a2597 55%, #0a2597 100%);
    background: linear-gradient(        top, #02eef7 0%, #0a2597 55%, #0a2597 100%);
}
.odometer.flip-auto-theme .odometer-digit .odometer-value:after {
    border-radius: 0 0 0.1em 0.1em;
    top: 50%;
    bottom: 0;
    line-height: 0;
    border-top: solid 1px white;
    background: -webkit-linear-gradient(top, #0a2597 0%, #0a2597 55%, #02eef7 100%);
    background: -moz-linear-gradient(   top, #0a2597 0%, #0a2597 55%, #02eef7 100%);
    background: -o-linear-gradient(     top, #0a2597 0%, #0a2597 55%, #02eef7 100%);
    background: -ms-linear-gradient(    top, #0a2597 0%, #0a2597 55%, #02eef7 100%);
    background: linear-gradient(        top, #0a2597 0%, #0a2597 55%, #02eef7 100%);
}

/*向下翻*/
.odometer.flip-auto-theme.animating-up .odometer-first-value:before {
    z-index: 3;
}
.odometer.flip-auto-theme.animating-up .odometer-last-value:after {
    z-index: 2;
    transform-origin: 50% 0%;
    transform: perspective(0) rotateX(180deg);
}
.odometer.flip-auto-theme.animating-up .odometer-first-value:after,
.odometer.flip-auto-theme.animating-up .odometer-last-value:before {
    z-index: 1;
}
.odometer.flip-auto-theme.animating-up.animating .odometer-first-value:before {
    transform-origin: 50% 100%;
    animation: frontFlipDown 0.6s ease-in-out both;
    backface-visibility: hidden;
}
.odometer.flip-auto-theme.animating-up.animating .odometer-last-value:after {
    animation: backFlipDown 0.6s ease-in-out both;
}

/*向上翻*/
.odometer.flip-auto-theme.animating-down .odometer-first-value:after {
    z-index: 3;
}
.odometer.flip-auto-theme.animating-down .odometer-last-value:before {
    z-index: 2;
    transform-origin: 50% 100%;
    transform: perspective(0) rotateX(-180deg);
}
.odometer.flip-auto-theme.animating-down .odometer-first-value:before,
.odometer.flip-auto-theme.animating-down .odometer-last-value:after {
    z-index: 1;
}
.odometer.flip-auto-theme.animating-down.animating .odometer-first-value:after {
    transform-origin: 50% 0;
    animation: frontFlipUp 0.6s ease-in-out both;
    backface-visibility: hidden;
}
.odometer.flip-auto-theme.animating-down.animating .odometer-last-value:before {
    animation: backFlipUp 0.6s ease-in-out both;
}


@keyframes frontFlipDown {
    0% {
        transform: perspective(0) rotateX(0deg);
    }
    100% {
        transform: perspective(0) rotateX(-180deg);
    }
}
@keyframes backFlipDown {
    0% {
        transform: perspective(0) rotateX(180deg);
    }
    100% {
        transform: perspective(0) rotateX(0deg);
    }
}
@keyframes frontFlipUp {
    0% {
        transform: perspective(0) rotateX(0deg);
    }
    100% {
        transform: perspective(0) rotateX(180deg);
    }
}
@keyframes backFlipUp {
    0% {
        transform: perspective(0) rotateX(-180deg);
    }
    100% {
        transform: perspective(0) rotateX(0deg);
    }
}


.odometer.flip-auto-theme .number0:before,
.odometer.flip-auto-theme .number0:after {
    content: "0";
}

.odometer.flip-auto-theme .number1:before,
.odometer.flip-auto-theme .number1:after {
    content: "1";
}

.odometer.flip-auto-theme .number2:before,
.odometer.flip-auto-theme .number2:after {
    content: "2";
}

.odometer.flip-auto-theme .number3:before,
.odometer.flip-auto-theme .number3:after {
    content: "3";
}

.odometer.flip-auto-theme .number4:before,
.odometer.flip-auto-theme .number4:after {
    content: "4";
}

.odometer.flip-auto-theme .number5:before,
.odometer.flip-auto-theme .number5:after {
    content: "5";
}

.odometer.flip-auto-theme .number6:before,
.odometer.flip-auto-theme .number6:after {
    content: "6";
}

.odometer.flip-auto-theme .number7:before,
.odometer.flip-auto-theme .number7:after {
    content: "7";
}

.odometer.flip-auto-theme .number8:before,
.odometer.flip-auto-theme .number8:after {
    content: "8";
}

.odometer.flip-auto-theme .number9:before,
.odometer.flip-auto-theme .number9:after {
    content: "9";
}
